<template>
  <a-layout class="registercontent">
    <a-form class="registerform" :model="registerParam" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-typography-title style="text-align: center">管理员注册</a-typography-title>
      <a-form-item label="管理员账号" :wrapper-col="{ span: 15, offset: 4 }">
        <a-input v-model:value="registerParam.m_id" placeholder="请输入子账号" />
      </a-form-item>
      <a-form-item label="管理员密码" :wrapper-col="{ span: 15, offset: 4 }">
        <a-input-password v-model:value="registerParam.m_password" placeholder="请输入密码" />
      </a-form-item>
      <a-form-item label="再输入一次密码" :wrapper-col="{ span: 15, offset: 4 }">
        <a-input-password v-model:value="registerParam.m_password2" placeholder="再输入密码" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 15, offset: 8 }">
        <a-row type="flex" justify="space-between">
          <a-button type="primary" @click="register">立即注册</a-button>
          <a-button type="primary" @click="clear">重 &nbsp; &nbsp; 置</a-button>
          <a-button type="primary" @click="goLogin">返回登录页 </a-button>
        </a-row>
      </a-form-item>
    </a-form>
  </a-layout>
</template>

<script>
import { reactive, defineComponent, h } from "vue";
import { post } from "@/common";
import { useRouter } from "vue-router";
import { Modal, message } from "ant-design-vue";
export default defineComponent({
  setup() {
    const success = (info) => {
      message.success(info);
    };
    const error = (info) => {
      message.error(info);
    };
    const router = useRouter();
    //reactive 双向绑定响应框
    const registerParam = reactive({
      m_id: "",
      m_password: "",
      m_password2: "",
    });

    const clear = () => {
      (registerParam.m_id = ""),
        (registerParam.m_password = ""),
        (registerParam.m_password2 = "")
    };

    const register = () => {
      if (
        registerParam.m_id == "" ||
        registerParam.m_password == "" ||
        registerParam.m_password2 == ""
      ) {
        error("数据不能为空！");
        return;
      }
      if (registerParam.m_password != registerParam.m_password2) {
        error("两次输入密码不一致！");
        return;
      }
      post("/manager/mRegister", registerParam).then((res) => {
        success("注册成功！")
        // 跳转至Home路由
        goLogin()
      });
    };

    const goLogin = () => {
      router.push({ path: "/m_login" });
    };

    // 一行有24列
    const labelCol = {
      span: 4,
    };
    const wrapperCol = {
      span: 14,
    };

    return {
      success,
      error,
      goLogin,
      router,
      registerParam,
      clear,
      register,
      labelCol,
      wrapperCol,
    };
  },
});
</script>
<style>
.registercontent {
  display: flex;
  flex-direction: column;
  background-image: url("/src/assets/background.png");
  background-size: 100% 100%;
  background-attachment: fixed;

  width: 100%;
  height: 100%;
  min-width: 900px;
  min-height: 1000px;

  justify-content: center;
  align-items: center;
}

.registerform {
  opacity: 0.95;
  background-color: #fff;
  min-width: 600px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 30px;
  padding: 30px 20px;
}
</style>